<script setup lang="ts">
import { withDefaults } from 'vue'
import { bindDeviceApi } from '@/services/my'
import { useMemberStore, useDeviceStore } from '@/stores'
const memberStore = useMemberStore()
const deviceStore = useDeviceStore()
const props = withDefaults(
  defineProps<{
    picture: string
    deviceNum: string
    id: number
    name: string
    rightArrow: boolean
    delete: boolean
  }>(),
  {
    rightArrow: false,
    delete: false,
  },
)
const emit = defineEmits<{
  (e: 'showqr', deviceNum: string): void
}>()
//显示二维码
const showqr = (deviceNum: string) => {
  emit('showqr', deviceNum)
}

//跳转详情页
const showdetail = (deviceNum: string, name: string) => {
  if (!props.rightArrow) return
  uni.navigateTo({
    url: `/pages/equipment-detail/equipment-detail?deviceNum=${deviceNum}&name=${name}`,
  })
}

//解绑设备
const unbinddevice = () => {
  uni.showModal({
    title: '温馨提示',
    content: '确定要解绑设备吗？',
    success: async (res) => {
      if (res.confirm) {
        const backmsg = await bindDeviceApi({
          bindFlg: 0,
          deviceNum: props.deviceNum,
          userId: memberStore.profile!.id,
        })
        if (backmsg.msg === '对象正常') {
          deviceStore.clearDeviceData()
          deviceStore.clearDeviceList()
          deviceStore.getDeviceList()
          //console.log(deviceStore.deviceList)
          //console.log(deviceStore.devicedetail)
          uni.navigateBack({
            delta: 1,
          })
          uni.showToast({
            title: '解绑成功',
            icon: 'none',
            duration: 1000,
          })
        } else {
          uni.showToast({
            title: '解绑失败',
            icon: 'none',
            duration: 1000,
          })
        }
      }
    },
  })
}
</script>
<template>
  <view class="prile_box" @click="showdetail(props.deviceNum, props.name)">
    <view class="delete-icon" v-if="props.delete" @click="unbinddevice()">
      <img src="@/static/delete.svg" alt="" />
    </view>
    <view class="avatar">
      <image :src="props.picture" mode="scaleToFill" v-if="props.picture" />
      <image src="@/static/default-avatar.svg" mode="scaleToFill" v-else />
    </view>
    <view class="equipment-info">
      <view class="equipment-name"> {{ props.name ? props.name : '--' }}</view>
      <view class="equipment-id">
        {{ '设备ID:' + props.deviceNum }}
      </view>
    </view>
    <img src="@/static/qrcode.svg" class="showqr" @click.stop="showqr(props.deviceNum)" />
    <img src="@/static/right-arrow.svg" class="right-arrow" v-if="props.rightArrow" />
  </view>
</template>

<style lang="scss">
.prile_box {
  position: relative;
  margin: 0 auto 28.846rpx;
  //padding-left: 32.692rpx;
  width: 690.385rpx;
  height: 211.538rpx;
  border: 1px solid rgba(187, 187, 187, 1);
  background-color: #ffff;
  display: flex;
  align-items: center;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
  .delete-icon {
    position: absolute;
    top: 19.231rpx;
    right: 19.231rpx;
    width: 28.846rpx;
    height: 28.846rpx;
    image {
      height: 100%;
      width: 100%;
    }
  }
  .avatar {
    margin: auto 28.846rpx;
    width: 140rpx;
    height: 140rpx;
    border-radius: 50%;
    background-color: #eee;
    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
  .equipment-info {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 250rpx;
    height: 142.308rpx;
    margin-left: 26.923rpx;
    font-size: 26.923rpx;
    font-size: PingFangSC-light;
  }
  .showqr {
    width: 46.154rpx;
    height: 46.154rpx;
    margin-left: 123.077rpx;
  }
  .right-arrow {
    width: 34.615rpx;
    height: 34.615rpx;
    margin-left: 9.615rpx;
  }
}
</style>
